<template>
	<!-- 我的客户 -->
	<view class="content display  width-100 displayColumn">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">我的客户</text>
			</template>
		</u-navbar>
		<view class="content_all display  width-100 displayColumn">
			<view class="content_all_one display  width-100 M-T30 displaycenter_aliem" style="padding-left:30rpx ;">
				<view :class="{fn_item:selectTime!=index, display:true, fn_item1:selectTime==index,all_item:true,'M-L40':index!=0}" v-for="(item,index) in arr" :key="index" @click="selectTime=index">
					<text :class="{fontSize:true, font_comm:true, txt1:selectTime!=index,txt2:selectTime==index}">{{item}}</text>
				</view>
			</view>
			<!-- 客户总计 -->
			<view class="client_all display  width-100 M-T24">
				<span class="fontSize font_comm txt3 M-L30">共<span style="font-size: 40rpx;">288</span>个客户</span>
			</view>
			<!-- 客户明细 -->
			<view class="clientdetails display  width-100 all_item displayColumn M-T20">
				<view class="clientdetails_all display  width_699 displaycenter_aliem">
					<view class="clientdetails_all_left display  all_item M-L24">
						<img class="imgs" src="@/static/img/car-manage.png" alt="" />
					</view>
					<view class="clientdetails_all_right display  displayColumn M-L16">
						<view class="fn_one display  width-100">
							<span class="fontSize font_comm fn_txt1">李天雷</span>
						</view>
						<view class="fn_two display  width-100 M-T8">
							<span class="fontSize font_comm fn_txt2">累计消费订单：</span>
							<span class="fontSize font_comm fn_txt3">￥3.890.999元</span>
						</view>
						<view class="fn_three display  width-100 M-T8">
							<span class="fontSize font_comm fn_txt2">累计消费金额：</span>
							<span class="fontSize font_comm fn_txt3" style="color: #126BC9;">1.999笔</span>
						</view>
						<view class="fn_three display  width-100 M-T8">
							<span class="fontSize font_comm fn_txt2">最近下单时间：2022-10-25 12:32:45</span>
							<!-- <span class="fontSize font_comm fn_txt3" style="color: #126BC9;">￥3.890.999元</span> -->
						</view>
					</view>
				</view>
				
			</view>
			
			</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectTime:0,
				arr:['全部','今日','近7天','近30天','近90天'],
			}
		},
		// 监听页面滚动到底部
		onReachBottom() {
					console.log("onReachBottom");
				},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.content{
	min-height: 100vh;
}
.fn_item{
	width: 94rpx;
	height: 42rpx;
	background: #FFFFFF;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.fn_item1{
	width: 94rpx;
	height: 42rpx;
	background: #126BC9;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.fn_txt1{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.fn_txt2{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_txt3{
	font-weight: 600;
	font-size: 24rpx;
	color: #FF672D;
}
.txt1{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.txt2{
	font-weight: 600;
	font-size: 24rpx;
	color: #FFFFFF;
}
.txt3{
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
}
.imgs{
	width: 132rpx;
	height: 132rpx;
	
	border-radius: 50%;
}
.clientdetails_all{
	width: 690rpx;
	height: 214rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
</style>
